<template>
	<!-- 用户页面 -->
	<view class="user-page">
		<!-- 用户登录页面 -->
		<view class="user-login-page">
			<!-- 用户账号盒子 -->
			<view class="user-login-name-box">
				<!-- 用户用户名 -->
				<view class="user-login-username">
					用户名
				</view>
				<!-- name输入框 -->
				<input type="text" v-model="inputUname" class="user-login-input-uname" placeholder="请输入账号" />
			</view>
			<!-- 用户密码盒子 -->
			<view class="user-login-psw-box">
				<!-- 密码 -->
				<view class="user-login-password">
					密码
				</view>
				<!-- 密码输入框 -->
				<input type="text" v-model="inputPsw" class="user-login-input-psd" placeholder="请输入密码" />
			</view>
			<!-- 用户再次输入密码盒子 -->
			<view class="user-again-input-psw-box">
				<!-- 再次输入密码 -->
				<view class="user-again-input-password">
					确认密码
				</view>
				<!-- 再次输入密码输入框 -->
				<input type="text" v-model="againInputPsw" class="user-again-input-psw" placeholder="请输入确定密码" />
			</view>
			<!-- 注册按钮 -->
			<button class="login-btn" @click="handleRegister">注册</button>
			<!-- 注册文本 -->
			<view class="user-register-text" @click="gologinPage">有账号？返回登录</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { navigateTo } from '../../utils/navigate';

// 定义状态变量
const inputUname = ref('')
const inputPsw = ref('')
const againInputPsw = ref('')
const isLoading = ref(false) // 添加加载状态控制

// 注册输入内容判断
const handleRegister = async () => {
    // 表单验证
    if (!inputUname.value.trim() || !inputPsw.value.trim()) {
        uni.showToast({
            title: '用户名和密码不能为空',
            icon: 'none'
        })
        return
    }
    
    if (inputPsw.value.trim() !== againInputPsw.value.trim()) {
        uni.showToast({
            title: '两次输入的密码不一致，请重试',
            icon: 'none'
        })
        return
    }
    
        // 显示加载状态
        isLoading.value = true
        uni.showLoading({
            title: '注册中...',
            mask: true
        })

        // 向服务器发起注册请求
        const [error, response] = await uni.request({
            url: 'http://47.98.187.80:5000/api/register',
            method: 'POST',
            header: { 'Content-Type': 'application/json' },
            data: {
                uname: inputUname.value,
                password: inputPsw.value
            }
        })

        console.log('注册响应:', response.data)
        
        // 检查HTTP状态码
        if (response.statusCode !== 200) {
            throw new Error(`注册失败 [${response.statusCode}]`)
        }
        
        // 注册成功处理
        uni.showToast({
            title: '注册成功',
            icon: 'success'
        })
        
        console.log('注册成功，用户信息:')
        
        // 跳转到登录页面
        setTimeout(() => {
            uni.navigateTo({
                url: '/pages/index/login'
            })
        }, 1500)
    
        // 隐藏加载状态
        isLoading.value = false
        uni.hideLoading()
}
	// 有账号,跳转到登录页面
	const gologinPage = () => navigateTo('/pages/index/login')
</script>

<style lang="scss">
	// 我的页面
	.user-page {
		height: 100vh;
		width: 100vw;

		// 用户登录页面
		.user-login-page {

			// 用户账号盒子
			.user-login-name-box {
				display: flex;
				width: px2rpx(343);
				height: px2rpx(24);
				padding: px2rpx(10) px2rpx(16);

				// 用户用户名
				.user-login-username {
					width: px2rpx(86);
					height: px2rpx(24);
					margin-right: px2rpx(12);
				}

				// name输入框
				.user-login-input-uname {
					width: px2rpx(244);
					height: px2rpx(24);
				}
			}

			// 用户密码盒子
			.user-login-psw-box {
				display: flex;
				width: px2rpx(343);
				height: px2rpx(24);
				padding: px2rpx(10) px2rpx(16);

				// 密码
				.user-login-password {
					width: px2rpx(86);
					height: px2rpx(24);
					margin-right: px2rpx(12);
				}

				// 密码输入框
				.user-login-input-psd {
					width: px2rpx(244);
					height: px2rpx(24);
				}
			}

			// 用户再次输入密码盒子
			.user-again-input-psw-box {
				display: flex;
				width: px2rpx(343);
				height: px2rpx(24);
				padding: px2rpx(10) px2rpx(16);

				// 再次输入密码
				.user-again-input-password {
					width: px2rpx(86);
					height: px2rpx(24);
					margin-right: px2rpx(12);
				}

				// 再次输入密码输入框
				.user-again-input-psw {
					width: px2rpx(244);
					height: px2rpx(24);
				}
			}

			// 登录按钮
			.login-btn {
				background: linear-gradient(to right, #ff0000, #fff07d);
				border-radius: px2rpx(22);
				margin: px2rpx(16);
				width: px2rpx(342);
				color: rgba(248, 248, 248, 0.9);
				height: px2rpx(42);
			}

			// 注册文本
			.user-register-text {
				text-align: center;
				width: px2rpx(375);
				font-size: px2rpx(24);
				height: px2rpx(24);
				color: #b9b5b5;
			}
		}
	}
</style>